import React ,{useEffect,useState} from 'react'
import {useDispatch,useSelector} from "react-redux"
import * as api from "../../api/index"
import { Sidebar,Search ,Badge} from 'react-vant';
import My_content from '../../components/My_content';
import {CartO} from "@react-vant/icons"


function Classify() {
  const dispatch = useDispatch()
  const [active, setActive] = useState(0);
  const [value, setValue] = useState('');

  const shopcar_length = useSelector(state => state.reducer.shopCar.length)
  useEffect(()=>{
    //刚进页面派发API下的请求方法
    dispatch(api.get_list())
  },[dispatch])

  const data = useSelector(state=>state.reducer.data)
  const childrenData = useSelector(state=>state.reducer.childrenData)

  return (
    <div className='classify'>
      <header style={{display:"flex",justifyContent:"space-around"}}>
        <div></div>
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />
        <Badge className='badge_icon' content={shopcar_length}>
          <CartO  color='green' fontSize={30}/>
        </Badge>
       
      </header>
      <main>
        <Sidebar
            value={active}
            onChange={(v) => {
              setActive(v);
              dispatch(api.set_children(v))
            }}
          >
            {
              data&&data.map((item,index)=>{
                  return <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.title}>
                    <My_content childrenData={childrenData}></My_content>
                </Sidebar.Item>
              })
            }
          </Sidebar>
      </main>
    </div>
  )
}

export default Classify